<template>
	<view class="container">
		<view class="logoZone">
			<image style="width: 180rpx;height: 180rpx;border-radius: 10%;"  src="../../static/shiqianLogo.jpg" mode="widthFix"></image>
		</view>
		<view class="loginZone">
			<view class="fromZone">
						<up-form
								labelAlign="center"
								labelPosition="left"
								:model="loginForm"
								:rules="rules"
								ref="loginRef"
						>
							<up-form-item
									label="号码"
									labelWidth="60px"
									prop="phoneNumber"
									ref="item1"
							>
								<up-input
										v-model="loginForm.phoneNumber"
										border="surround"
								></up-input>
							</up-form-item>
							<up-form-item
									label="验证码"
									labelWidth="60px"
									prop="smsCode"
									ref="item1"
							>
								<up-input
										v-model="loginForm.smsCode"
										border="surround"
								>
									<template #suffix>
										<up-button
											@click="getCode"
											:text="tips"
											type="success"
											size="mini"
											:disabled="countdown > 0 ? true : false"
										>
										<span  v-if="countdown <= 0">获取验证码</span>
										<span v-else>{{countdown}}s后重新获取</span>
										</up-button>
									</template>
								</up-input>
							</up-form-item>
						</up-form>
			  <view class="logBtnZone">
					<up-button style="width: 150px;" @click="login" type="success" :plain="true" text="镂空">登录</up-button>
			  </view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="info" title="提示" :content="diaContent" mode="base" message="成功消息" :duration="2000" :before-close="true" :showClose="false"  @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { customerGetCodeService,customerLoginService } from '../../api/customer.js'
	import { useCustomerStore } from '../../stores/customer.js'
	
	//用户仓库数据
	const customerStore = useCustomerStore();
	
	//=========对话框==========
	const diaContent = ref('');//对话框内容
	const popup = ref();//对话框标识
	const confirm = () => {
		popup.value.close();
	}
	//=========对话框==========
 	
	// 获取路由参数
	onLoad((options) => {
		console.log('接收传值：',options);
		if(options.tokenError){
			uni.showModal({
				title: '提示',
				content: options.msg,
				confirmText: '确定',
				showCancel: false,
				icon: 'error',
			});
		}
		
		if(options.routeType === 'logout'){
			uni.showToast({
				title: '已退出登陆！',
				icon: 'success'
			})
		}
	});
	
	//登录表单标识Ref
	const loginRef = ref();
	const countdown = ref(0);//是否点击发送验证码
	const timer = ref(null);//定时器标识
	
	//登录表单
	const loginForm = ref({
		phoneNumber: '',
		smsCode: ''
	})
	
	
	//获取验证码
	const getCode = async () => {
		loginRef.value.validateField('phoneNumber', async (errorsRes) => {
        if (errorsRes.length === 0) {
			const res = await customerGetCodeService(loginForm.value.phoneNumber);
			console.log("获取的验证码响应Res===>",res);
			if(res.data.code !== 200){
				uni.showModal({
					title: '提示',
					content: res.data.msg,
					confirmText: '确定',
					showCancel: false,
					icon: 'error',
					success: (res) => {
						
					}
				});
				return;
			}
			diaContent.value = '由于短信接口未实装，暂时提供此获取验证码方式，您获取的验证码为：'+res.data.data;
			// 弹出提示
			popup.value.open();
			
			//点击后发送请求，获取验证码并开启倒计时。
			if (countdown.value === 0) {
			  countdown.value = 60;
			    timer.value = setInterval(() => {
			      if (countdown.value > 0) {
			        countdown.value--;
			      } else {
			        clearInterval(timer.value);
			        timer.value = null;
			      }
			    }, 1000);
			}
        }else {
			uni.showToast({
				title: '请先填写号码!',
				icon:'error'
			});
		}
      });
	}
	
	//登录
	const login = async () => {
		await loginRef.value.validate();// 校验表单
		
		//进行登录请求
		let customerParam = {
			phoneNumber: loginForm.value.phoneNumber,
			code: loginForm.value.smsCode
		}
		const res = await customerLoginService(customerParam);
		if(res.data.code !== 200){
			uni.showModal({
				title: '提示',
				content: res.data.msg,
				confirmText: '确定',
				showCancel: false,
				icon: 'error',
				success: (res) => {
					
				}
			})
		}else {
			customerStore.setCustomerInfo(res.data.data);//存储登录用户的信息
			customerStore.setToken(res.data.data.token);//存储登陆了用户token信息
			uni.switchTab({
				url: '/pages/home/home'
			})
		}
		console.log(res);
		
	}
	
	//登录规则校验
	const rules = ref({
	  'phoneNumber': {
		type: 'string',
		required: true,
		message: '请填写号码',
		trigger: ['blur', 'change'],
	  },
	  'smsCode': {
		type: 'string',
		required: true,
		message: '请填写验证码',
		trigger: ['blur', 'change'],
	  },
	});
</script>

<style lang="scss">
.container{
	background-color: #f8f8f8;
	min-height: 100%;
	position: relative;
	overflow: hidden;
	.logoZone{
		position: absolute;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
	}
	.loginZone{
		position: absolute;
		top: 25%;
		width: 100%;
		height: 550rpx;
		// background-color: aquamarine;
		border-radius: 5%;
		.fromZone{
			margin-top: 140rpx;
			:deep(.u-button){
				font-size: 13px;
			}
			:deep(.u-input){
				background-color: #fff;
				width: 90%;
			}
		}
	}
	.logBtnZone{
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		:deep(.u-button){
			width: 150px;
		}
	}
}
</style>
